<template>
  <div class="cost-box">
    <div class="cost-header">
      <div class="cost-left">
        <div
          v-for="cost in costs"
          :key="cost.code"
          class="cost-item"
          :class="{ 'cost-active': curCost === cost.code }"
          @click="switchCost(cost.code)"
          >{{ cost.name }}</div
        >
      </div>
      <div class="cost-right">
        <div class="custom-photo">
          <img :src="curTypePhoto" alt="" />
        </div>
        <div class="person-type">{{ curPersonType }}</div>
        <div class="work-item-switch type-switch">
          <je-dropdown
            placement="bottomRight"
            :trigger="['click']"
            :get-popup-container="popupContainer"
          >
            <span class="work-item-switch-name" @click.prevent>切换</span>
            <DownOutlined />
            <template #overlay overlayStyle>
              <je-menu>
                <je-menu-item
                  v-for="item in personTypeList"
                  :key="item.value"
                  :class="{ 'person-type-foucs': curPersonType == item.label }"
                >
                  <span @click="handlePersonType(item.value)">{{ item.label }}</span>
                </je-menu-item>
              </je-menu>
            </template>
          </je-dropdown>
        </div>
        <div class="time-swicth-box">
          <div class="time-label">
            <i class="fal fa-alarm-clock"></i>
            <span>时间:</span>
          </div>
          <!-- 选择年 -->
          <div class="work-item-switch date-switch year-switch">
            <je-dropdown
              placement="bottomRight"
              :trigger="['click']"
              :get-popup-container="popupContainer"
            >
              <span class="date-select">
                <span class="date-label">{{ curYear }}</span>
                <span class="date-arrow"></span>
              </span>
              <DownOutlined />
              <template #overlay overlayStyle>
                <je-menu>
                  <je-menu-item
                    v-for="item in yearList"
                    :key="item.value"
                    :class="{ 'person-type-foucs': curYear == item.label }"
                    @click="handleYear(item.label)"
                  >
                    <span>{{ item.label }}</span>
                  </je-menu-item>
                </je-menu>
              </template>
            </je-dropdown>
          </div>
        </div>
      </div>
    </div>
    <div id="cost" class="cost-main"></div>
  </div>
</template>

<script>
  import { defineComponent, toRefs, onMounted, ref, watch } from 'vue';
  import { useI18n } from '@common/locales';
  import * as echarts from 'echarts';
  import { DownOutlined } from '@ant-design/icons-vue';
  import companyPhoto from '@/assets/company-photo.png';
  import personPhoto from '@/assets/person-photo.png';
  export default defineComponent({
    name: 'WorkCost',
    components: {
      DownOutlined,
    },
    setup() {
      const t = useI18n().t;
      let curCost = ref('borrow'); //当前选中的统计项
      let curPersonType = ref('全公司');
      let curYear = ref('本年度');
      watch(
        () => curCost.value,
        (value) => {
          switch (value) {
            case 'borrow':
              methods.initBorrowChart();
              break;
            case 'entertain':
              methods.initEntertainChart();
              break;
            default:
              break;
          }
        },
      );
      const state = {
        costs: [
          { name: t('workBoard.borrow'), code: 'borrow' },
          { name: t('workBoard.entertain'), code: 'entertain' },
        ],
        monthData: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月',
        ],
        borrowSales: [120, 132, 101, 134, 90, 230, 210, 220, 182, 191, 234, 290],
        entertain: [150, 232, 201, 154, 190, 330, 410, 120, 132, 101, 134, 90],
        personTypeList: [
          {
            value: 'QGS',
            label: '全公司',
          },
          {
            value: 'WZJ',
            label: '我自己',
          },
        ],
        yearList: [
          {
            value: 'BND',
            label: '本年度',
          },
          {
            value: 'QN',
            label: '去年',
          },
          {
            value: 'QN',
            label: '前年',
          },
        ],
        companyPhoto,
        personPhoto,
        curTypePhoto: companyPhoto,
      };
      const methods = {
        switchCost(code) {
          curCost.value = code;
        },
        initBorrowChart() {
          echarts.init(document.getElementById('cost')).dispose();
          let myEchart = echarts.init(document.getElementById('cost'));
          myEchart.clear();
          let option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985',
                },
              },
            },
            grid: {
              left: '7%',
              right: '5%',
              top: 70,
              bottom: 50,
            },
            xAxis: {
              data: state.monthData,
              axisLabel: {
                color: '#333333',
                fontSize: 14,
              },
            },
            yAxis: {
              name: '金额（万元）',
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: '#333333',
                fontSize: 14,
              },
              nameTextStyle: {
                color: '#333333',
                fontSize: 14,
                lineHeight: 40,
                rich: {
                  a: {},
                },
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                },
              },
            },
            series: [
              {
                name: '金额（万元）',
                type: 'bar',
                barGap: 0,
                barWidth: 40, // 柱图宽度
                barMinHeight: 3,
                data: state.borrowSales,
                label: {
                  show: true,
                  position: 'top', //在上方显示
                },
                itemStyle: {
                  color: '#009dff',
                },
              },
            ],
          };
          option && myEchart.setOption(option);
          // window.addEventListener('resize', () => {
          //   myEchart.resize();
          // });
        },
        initEntertainChart() {
          echarts.init(document.getElementById('cost')).dispose();
          let myEchart = echarts.init(document.getElementById('cost'));
          myEchart.clear();
          let option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985',
                },
              },
            },
            grid: {
              left: '7%',
              right: '5%',
              top: 70,
              bottom: 50,
            },
            xAxis: {
              data: state.monthData,
              axisLabel: {
                color: '#333333',
                fontSize: 14,
              },
            },
            yAxis: {
              name: '金额（万元）',
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: '#333333',
                fontSize: 14,
              },
              nameTextStyle: {
                color: '#333333',
                fontSize: 14,
                lineHeight: 40,
                rich: {
                  a: {},
                },
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                },
              },
            },
            series: [
              {
                name: '金额（万元）',
                type: 'bar',
                barGap: 0,
                barWidth: 40, // 柱图宽度
                barMinHeight: 3,
                data: state.entertain,
                label: {
                  show: true,
                  position: 'top', //在上方显示
                },
                itemStyle: {
                  color: '#009dff',
                },
              },
            ],
          };
          option && myEchart.setOption(option);
          // window.addEventListener('resize', () => {
          //   myEchart.resize();
          // });
        },
        popupContainer(triggerNode) {
          //窗口滚动依附于父节点滑动
          return triggerNode.parentNode;
        },
        handleYear(year) {
          curYear.value = year;
        },
        handlePersonType(typeValue) {
          //切换个人类型
          for (let typeItem of state.personTypeList) {
            if (typeItem.value === typeValue) {
              curPersonType.value = typeItem.label;
              state.curTypePhoto = typeValue == 'QGS' ? companyPhoto : personPhoto;
            }
          }
        },
      };
      onMounted(() => {
        methods.initBorrowChart();
      });
      return {
        curCost,
        curPersonType,
        curYear,
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style>
  .cost-box .type-switch .ant-dropdown .ant-dropdown-content {
    margin-top: 20px;
  }
  .cost-box .date-switch .ant-dropdown .ant-dropdown-content {
    margin-top: 14px;
    text-align: center;
  }
  .cost-box .date-switch .ant-dropdown .ant-dropdown-content .ant-dropdown-menu-item {
    text-align: center;
  }
</style>
<style scoped lang="less">
  .cost-box {
    width: 100%;
    height: 546px;
    background-color: #ffffff;
    border-radius: 4px;
    margin-top: 20px;
    .cost-header {
      width: 100%;
      height: 60px;
      padding: 0 30px;
      border-bottom: 1px solid #dcdcde;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .cost-left {
        display: inline-flex;
        .cost-item {
          height: 60px;
          line-height: 60px;
          box-sizing: border-box;
          margin-right: 40px;
          font-size: 16px;
          font-weight: bold;
          color: #a9aba9;
          cursor: pointer;
        }
        .cost-item:hover {
          color: @primary-color;
        }
        .cost-active {
          height: 60px;
          line-height: 60px;
          box-sizing: border-box;
          margin-right: 40px;
          font-size: 16px;
          font-weight: bold;
          color: @primary-color;
          border-bottom: 2px solid @primary-color;
        }
      }
      .cost-right {
        display: inline-flex;
        align-items: center;
        .custom-photo {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .person-type {
          padding: 0 10px;
          font-size: 14px;
          // font-family: 'PingFang SC, PingFang SC-Normal';
          color: #3f3f3f;
        }
        .work-item-switch {
          position: relative;
          .work-item-switch-name {
            cursor: pointer;
            color: @primary-color;
          }
        }
        .type-switch {
          width: 82px;
        }
        .time-swicth-box {
          width: 160px;
          display: inline-flex;
          align-items: center;
        }
        .time-label {
          font-size: 14px;
          color: #3f3f3f;
          span {
            padding-left: 5px;
          }
        }
        .date-switch {
          margin-left: 20px;
          cursor: pointer;
          .date-select {
            height: 26px;
            line-height: 26px;
            padding: 0 16px;
            display: inline-block;
            background-color: @primary-color;
            color: #ffff;
            border-radius: 14px;
            cursor: pointer;
            .date-label {
              font-size: 14px;
              color: #ffffff;
              padding-right: 4px;
            }
            .date-arrow {
              width: 0;
              height: 0;
              border-left: 4px solid transparent;
              border-right: 4px solid transparent;
              border-top: 7px solid #ffffff;
              font-size: 0;
              line-height: 0;
            }
          }
        }
        .year-switch {
          width: 84px;
        }
      }
    }
    .cost-main {
      width: 100%;
      height: 486px;
    }
  }
</style>
